<template>
  <div class="login-page">
    <div>
      <LoginLogo />
      <Transition
        style="animation-duration: 0.4s"
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutLeft"
        @after-leave="isOne = true"
      >
        <SelectSys v-if="isSec" @back="backLogin" :perm-list="permList" />
      </Transition>
      <Transition
        style="animation-duration: 0.4s"
        enter-active-class="animate__animated animate__fadeInRight"
        leave-active-class="animate__animated animate__fadeOutLeft"
        @after-leave="isSec = true"
      >
        <LoginForm
          v-if="isOne"
          :form-data="formData"
          @login="login"
          :loading="loginLoading"
        />
      </Transition>
    </div>
    <Footer />
  </div>
</template>

<script setup lang="ts">
import Footer from '@/components/Footer/index.vue'
import LoginLogo from './components/LoginLogo.vue'
import LoginForm from './components/LoginForm.vue'
import SelectSys from './components/SelectSys.vue'

import useLogin from './hooks/useLogin'

const { formData, login, loginLoading, isSec, isOne, backLogin, permList } =
  useLogin()
</script>

<style lang="scss">
@include b(login-page) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 100vh;
  width: 100vw;
  background-image: url(https://gw.alipayobjects.com/zos/rmsportal/TVYTbAXWheQpRcWDaDMu.svg);
  background-repeat: no-repeat;
  background-position: center 110px;
  background-size: 100%;
  background-color: #f0f2f5;
  padding-top: 72px;
}
</style>
